<%@ page import="databean.Email"%>
<%@ page import="databean.User"%>
<%@ page import="java.util.ArrayList" %>
<jsp:include page="include-header.jsp"/>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/jquery.googleTextTranslate.plugin.js"></script>	
<script src="js/jquery.bgiframe.min.js" type="text/javascript"></script>

<%
	ArrayList<Email> conversationIDsY = (ArrayList<Email>) request.getAttribute("conversationIDs");
	User user = (User) request.getAttribute("user");
	if (conversationIDsY.isEmpty()){
		%>
		<div id="content" class="full_column">
		<div id="content_header">Conversation feeds<a href="#" class="awesome green medium">+ Send new message</a></div>
		<div class="empty-message">
		You have no messages at the moment. <p>It's okay! Install our <a href="http://localhost/app?keepThis=true&TB_iframe=true&height=500&width=1000" target="_blank" style="color: white; decoration: none;">GlobaTrek Email Forwarder Application</a> to have your emails integrated here.</p>
		</div>
		</div>
		<%
		
	} else {			
							Email emailInit = conversationIDsY.get(0);
							long initConversationID = emailInit.getConversationID();
%>
<script>
/*script for the tabs*/
google.load("language", "1");
	$(document).ready(function() {
		
		$( '#howdy' ).howdyDo({
			action		: 'push',
			effect		: 'slide',
			easing		: 'easeInOutExpo',
			duration	: 1000,
			initState	: 'closed',
			openAnchor	: '<img src="images/down-arr-16x16.png" border=0 />',
			closeAnchor	: '<img src="images/close-16x16.png" border=0 />'
		});
		//Google Translate
		var options = {
				//targetLanguage: 'zh-cn', to change language refer to google translate target language
				targetLanguage: 'en',
				translatedPrefix: '(Translated) ',
				translatedPostfix: '',
				fadeOutDelay: 10000,
				autoClose: true
			};  
		
		$('#right_inner').textGoogleTranslate(options);
		
			$("#right_inner").empty().hide().html("<div id=\"loading-spinner\" style=\"display:none\"><img src=\"images/loading.gif\"/><p>Loading your messages...</p></div>").fadeIn('slow');
	    	$("#loading-spinner").show();
	    	
	    	$('tr.inboxContainer:first-child').addClass('selected');

	    	$.ajax({
    			type: 		"get",
    			url: 		"get-emails-by-conversationID.do",
    			data: 		"conversationID=" + <%=initConversationID%>,
    			success:	function(data) {
    				setTimeout(function() {$('#loading-spinner').hide();}, 1000);
    				setTimeout(function() {$("#right_inner").empty().html(data);}, 1000);
    			}
    		});
	    	
	    	$('#contactlist').dataTable( {
				"bSort": false,
				"bProcessing": true,
				"sPaginationType": "full_numbers"
			} );
	    	
	    //end test
		
	});
</script>

	<script>
	$(function() {
	  	$('tr.inboxContainer').click(function() {
			$("#right_inner").empty().hide().html("<div id=\"loading-spinner\" style=\"display:none\"><img src=\"images/loading.gif\"/><p>Loading your messages...</p></div>").fadeIn('slow');
	    	$("#loading-spinner").show();
	    	$('tr.inboxContainer').removeClass('selected');
	    	$(this).addClass('selected');

	    	var convID = this.id;
	    	$.ajax({
    			type: 		"get",
    			url: 		"get-emails-by-conversationID.do",
    			data: 		"conversationID=" + convID,
    			success:	function(data) {
    				setTimeout(function() {$('#loading-spinner').hide();}, 1000);
    				setTimeout(function() {$("#right_inner").empty().html(data);}, 1000);
    			}
    		});
	    	
	    });
	    	
	});
	</script>


<!-- $("#right_inner").empty().html('<div id="loading-spinner"><img src="images/loading.gif"/><p>Loading your messages...</p></div>').fadeOut(3000);
 -->    				
<div id="howdy">Get your e-mails on <em>GlobaTrek</em>, download your <strong><a href="http://localhost/app?keepThis=true&TB_iframe=true&height=640&width=1000" title="Download Email Forwarder" class="thickbox">GlobaTrek Email Forwarder</a></strong> now!<br />
</div>
 
<!-- start of left column -->
<div id="content" class="full_column">
	<div id="content_header">Conversation feeds<a href="#" class="awesome green medium">+ Send new message</a>
	<span class="label"> | Translation Engine <select name="targetLanguage" id="GoogleTranslate_targetLanguage" onchange="doSubmit('action:SelectTargetLanguage', 'Submit', 'GoogleTranslate');">
    				<option value="de">German</option>
				    <option value="zh-TW">Chinese Traditional</option>
				    <option value="zh-cn" selected="selected">English (US)</option>
				    <option value="ar">Arabic</option>
	    <option value="en">English</option>
	    <option value="ja">Japanese</option>
    		 </select>
    		
    		 </span>
    		 
    		 </div>
	<div id="content_padded">
	<jsp:include page="user-error-list.jsp" />

		<div id="left_inner">
			<!-- Account tabs on the left -->
			<h4>Inbox</h4>
		        <!-- dropdown mulitple -->
		        
				
				
		        	<table class="display" id="contactlist">	
						<thead>
							<tr>
								<!-- <th style="width: 30%">Last Received</th> -->
								<th style="width: 100%">Conversation</th>
							</tr>
						</thead>	
						<tbody>
						<%
						ArrayList<Email> conversationIDs = (ArrayList<Email>) request.getAttribute("conversationIDs");
						
						for (int i=0; i<conversationIDs.size(); i++) {
							
							Email email = conversationIDs.get(i);
							long conversationID = email.getConversationID();
							//String conversationIDURL = "./get-emails-by-conversationID.do?conversationID=" + conversationID;
						%>
							<tr class="inboxContainer" id="<%=conversationID%>">
								<%-- <td><%= email.getTimestamp() %></td> --%>
								<td>
									<div class="subjectContainer">
										<div class="subjectHeader"><%= email.getSubject() %></div>
										<div class="subjectIcon"><%= email.getEmailCount() %><img src="images/mail.jpg"/></div>
										<div class="messageInfo2"><a href="#"><%=email.getStatus()%></a></div>
										<%-- <div class="subjectUsers">
											Recipients: 
											<a href="#"><%=email.getRecipient()%></a>
										</div> --%>
										<%-- <div class="expandable"><p style="margin:0px; margin-top: 5px;"><%=email.getBody()%></p></div> --%>
										<%-- <div class="subjectUsers">Senders: <a href="#"><%=email.getSender()%></a></div> --%>
									</div>
								</td>
							</tr>
							<%
						}
	
						%>
					
							
						</tbody>			
					</table>
		</div>
		

		
		<!--  Where the feeds will appear  -->
	<div id="right_inner">
	<div id="loading-spinner" style="display:none"><img src="images/loading.gif"/><p>Loading your messages...</p></div>
	
    
    
    </div>
			
			
	</div>
	</div>
	<% } %>

<!-- end of left column -->


<jsp:include page="include-footer.jsp"/>

